<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>GabrielxD's Secret Base</title>
  <!-- 网站图标 -->
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  <!-- 导入字体 -->
  <link rel="stylesheet" type="text/css"
    href="https://fonts.font.im/css?family=Comfortaa&amp;subset=cyrillic,cyrillic-ext,greek,latin-ext" />
  <link rel="stylesheet" type="text/css" href="https://fonts.font.im/css?family=Source+Sans+Pro" />
  <!-- fontawesome 字体图标 -->
  <!-- <script src="https://kit.fontawesome.com/d30ee37b07.js" crossorigin="anonymous"></script> -->
  <link rel="stylesheet" href="fontawesome/css/all.min.css" />
  <link rel="stylesheet" href="css/base.css" />
  <link rel="stylesheet" href="css/common.css" />
  <link rel="stylesheet" href="css/post.css" />
  <script src="js/common.js"></script>
</head>

<body>
  <div class="app" id="app">
    <header class="top-navbar">
      <div class="left">
        <a class="toggle-aside-btn" id="toggle-aside">
          <i class="fas fa-bars"></i>
        </a>
        <div class="search-box">
          <input type="text" class="search-input" placeholder="输入关键词搜索..." />
          <button class="search-btn">
            <i class="fa fa-search"></i>
          </button>
        </div>
      </div>
      <div class="right">
        <div class="music-player">
          <div class="music-cover">
            <img src="upload/music_cover/music01.jpg" />
          </div>
          <div class="music-player-info">
            <div class="music-info">
              <span class="music-title">終点の先が在るとするならば。</span>
              <span class="music-author"> - ツユ</span>
            </div>
            <div class="music-control">
              <div class="play-control clearfix">
                <button class="left prev">
                  <i class="fas fa-backward"></i>
                </button>
                <button class="left toggle-pause">
                  <i class="fas fa-pause"></i>
                </button>
                <button class="left next">
                  <i class="fas fa-forward"></i>
                </button>
                <button class="right volume">
                  <i class="fas fa-volume-up"></i>
                  <div class="volume-bar">
                    <div class="volume-size"></div>
                  </div>
                </button>
              </div>
              <div class="progress-bar">
                <div class="fake-progress-bar"></div>
                <div class="progress">
                  <div class="circle"></div>
                </div>
              </div>
            </div>
          </div>
          <audio src="media/audio/music01.mp3"></audio>
        </div>
        <a href="login.html" class="login"><i class="fas fa-sign-in-alt"></i>登录</a>
        <a href="register.html" class="register"><i class="fas fa-user-plus"></i>注册</a>
      </div>
    </header>
    <aside class="left-aside">
      <a href="index.html" title="GabrielxD's Playground" class="brand">
        <i class="fas fa-carrot"></i>
        <span class="text">GabrielxD</span>
      </a>
      <div class="wrapper">
        <div class="host">
          <div class="logo">
            <h1>
              <a href="index.html">
                <img src="image/logo.png">
              </a>
            </h1>
          </div>
          <div class="text">
            <strong data-unfold-text="珈百璃" data-folded-text="Gab">珈百璃</strong>
            <p>MOE IS JUSTICE!</p>
          </div>
        </div>
        <div class="separation"></div>
        <ul class="navigation">
          <li class="title">
            <span>导航</span>
          </li>
          <li>
            <a href="index.html">
              <i class="fas fa-home item-icon"></i>
              <span>主页</span>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="fas fa-info-circle item-icon"></i>
              <span>关于本站</span>
            </a>
          </li>
          <li>
            <a href="https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md"
              target="_blank">
              <i class="fas fa-question-circle item-icon"></i>
              <span>提问的智慧</span>
            </a>
          </li>
          <li>
            <a>
              <i class="fas fa-cubes item-icon"></i>
              <span>一些小作品</span>
              <i class="fas fa-angle-right toggle-fold"></i>
            </a>
            <ul class="sub-nav">
              <li>
                <a href="https://gabrielxd.gitee.io/todo-list/" target="_blank">
                  <i class="fas fa-check-circle item-icon"></i>
                  <span>待办清单</span>
                </a>
              </li>
              <li>
                <a href="http://gabrielxd.gitee.io/feelfreetrip_mobile/" target="_blank">
                  <i class="fas fa-plane-departure item-icon"></i>
                  <span>随便旅旅</span>
                </a>
              </li>
              <li>
                <a href="http://gabrielxd.gitee.io/heimamm/" target="_blank">
                  <i class="fas fa-terminal item-icon"></i>
                  <span>黑马面面</span>
                </a>
              </li>
            </ul>
          </li>
        </ul>
        <div class="separation"></div>
        <ul class="others">
          <li class="title">
            <span>其它</span>
          </li>
          <li>
            <a href="https://twitter.com/home">
              <i class="fab fa-youtube item-icon"></i>
              <span>Youtube</span>
            </a>
          </li>
          <li>
            <a href="https://www.youtube.com/">
              <i class="fab fa-twitter item-icon"></i>
              <span>Twitter</span>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="fas fa-cubes item-icon"></i>
              <span>正经的东西</span>
              <i class="fas fa-angle-right toggle-fold"></i>
            </a>
            <ul class="sub-nav">
              <li>
                <a href="#">
                  <i class="fas fa-question-circle item-icon"></i>
                  <span>看起来</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="fas fa-question-circle item-icon"></i>
                  <span>这里并没有</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="fas fa-question-circle item-icon"></i>
                  <span>什么正经的</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="fas fa-question-circle item-icon"></i>
                  <span>东西呢</span>
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">
              <i class="fas fa-home item-icon"></i>
              <span>不正经的东西</span>
              <i class="fas fa-angle-right toggle-fold"></i>
            </a>
            <ul class="sub-nav">
              <li>
                <a href="#">
                  <i class="fas fa-question-circle fa-rotate-180 item-icon"></i>
                  <span>看起来</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="fas fa-question-circle fa-rotate-180 item-icon"></i>
                  <span>这里也没有</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="fas fa-question-circle fa-rotate-180 item-icon"></i>
                  <span>什么不正经的</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="fas fa-question-circle fa-rotate-180 item-icon"></i>
                  <span>东西呢</span>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <a class="back-top">
        <img src="image/back_top.png">
        <div class="tip">返回顶部</div>
      </a>
    </aside>
    <main class="main-content">
      <div class="wrapper">
        <header class="main-header">
          <h1 class="heading">sdfsdf.dev</h1>
          <small class="subheading">
            <span class="post-author">
              <i class="fas fa-at"></i>
              <a href="https://sdfsdf.dev/" target="_blank">sdfsdf.dev</a>
            </span>
            <span>
              <i class="far fa-clock"></i>
              2021-11-29
            </span>
            <span>
              <i class="far fa-eye"></i>
              1,919,810 次浏览
            </span>
            <span>
              <i class="far fa-comments"></i>
              195 条评论
            </span>
          </small>
        </header>
        <nav class="breadcrumb">
          <ul class="left">
            <li><a href="index.html"><i class="fas fa-home"></i>&nbsp;首页</a></li>
            <li><a href="post.html">正文</a></li>
          </ul>
          <ol class="right">
            <li>分享到：</li>
            <li><a href="https://twitter.com/home"><i class="fab fa-twitter"></i></a></li>
            <li><a href="//github.com"><i class="fab fa-github"></i></a></li>
          </ol>
        </nav>
        <div class="panel">
          <div class="entry-thumbnail"></div>
          <div class="article-wrapper">
            <article class="article">
              <section class="article-header">
                <h2 class="center">The Story</h2>
                <p>One day, I dreamed I had created a website for frontend developers, which is an <strong>API tool for
                    generating lorem ipsum (a.k.a. fake words), and getting placeholder images.</strong> The dream even
                  told me
                  the
                  domain of the website.</p>
                <p>After I had woken up, I searched for the domain availability, and it is available!</p>
                <p>So, I decided to create this website, and recorded the whole development process as a screencast,
                  which can be found <a href="https://youtu.be/SAPZ18jbbXM" target="_blank">here</a>.</p>
              </section>
              <section class="article-main">
                <h2 class="center">How to use</h2>
                <h3 class="center"><span>Lorem Ipsum</span></h3>
                <div class="table">
                  <div class="th">
                    <h3>Words</h3>
                    <p>/<strong>num</strong>w</p>
                  </div>
                  <div class="td">
                    <div class="tl">
                      <strong>5 random words</strong>
                      <a href="https://sdfsdf.dev/5w">https://sdfsdf.dev/5w</a>
                    </div>
                    <div class="tl">
                      <strong>5 random words</strong>
                      <a href="https://sdfsdf.dev/5w,">https://sdfsdf.dev/5w,</a>
                    </div>
                  </div>
                </div>
                <div class="table">
                  <div class="th">
                    <h3>Sentencs</h3>
                    <p>/<strong>num</strong>s</p>
                  </div>
                  <div class="td">
                    <div class="tl">
                      <strong>10 random sentencs</strong>
                      <a href="https://sdfsdf.dev/10s">https://sdfsdf.dev/10s</a>
                    </div>
                    <div class="tl">
                      <strong>5 random sentencs in Array</strong>
                      <a href="https://sdfsdf.dev/5s,">https://sdfsdf.dev/5s,</a>
                    </div>
                  </div>
                </div>
                <div class="table">
                  <div class="th">
                    <h3>Paragraphs</h3>
                    <p>/<strong>num</strong>p</p>
                  </div>
                  <div class="td">
                    <div class="tl">
                      <strong>3 random paragraphs</strong>
                      <a href="https://sdfsdf.dev/3p">https://sdfsdf.dev/3p</a>
                    </div>
                    <div class="tl">
                      <strong>3 random paragraphs in Array</strong>
                      <a href="https://sdfsdf.dev/3p,">https://sdfsdf.dev/3p,</a>
                    </div>
                  </div>
                </div>
                <div class="table">
                  <div class="th">
                    <h3>Text (Fixed Length of Words)</h3>
                    <p>/<strong>num</strong>t</p>
                  </div>
                  <div class="td">
                    <div class="tl">
                      <strong>Random words with fixed length of 20</strong>
                      <a href="https://sdfsdf.dev/20t">https://sdfsdf.dev/20t</a>
                    </div>
                  </div>
                </div>
                <h3 class="center"><span>Image Placeholder</span></h3>
                <div class="table">
                  <div class="th">
                    <h3>Images</h3>
                    <p>/<strong>width</strong>x<strong>height</strong>.png</p>
                    <p>/<strong>width</strong>x<strong>height</strong>.jpg</p>
                  </div>
                  <div class="td">
                    <div class="tl">
                      <strong>300×200 PNG image</strong>
                      <a href="https://sdfsdf.dev/300x200.png">https://sdfsdf.dev/300x200.png</a>
                    </div>
                    <div class="tl">
                      <strong>5 random words</strong>
                      <a href="https://sdfsdf.dev/600x400.jpg">https://sdfsdf.dev/600x400.jpg</a>
                    </div>
                  </div>
                </div>
                <div class="table">
                  <div class="th">
                    <h3>Images with Custom Colors</h3>
                    <p>
                      /<strong>width</strong>x<strong>height</strong>.png,<strong>bgcolor</strong>,<strong>textcolor</strong>
                    </p>
                    <p>
                      /<strong>width</strong>x<strong>height</strong>.jpg,<strong>bgcolor</strong>,<strong>textcolor</strong>
                    </p>
                  </div>
                  <div class="td">
                    <div class="tl">
                      <strong>300×200 PNG image, with blue background color and yellow text color.</strong>
                      <a
                        href="https://sdfsdf.dev/300x200.png,blue,yellow">https://sdfsdf.dev/300x200.png,blue,yellow</a>
                    </div>
                    <div class="tl">
                      <strong>600×400 JPG image, with black background color and white text color.</strong>
                      <a
                        href="https://sdfsdf.dev/600x400.jpg,000000,ffffff">https://sdfsdf.dev/600x400.jpg,000000,ffffff</a>
                    </div>
                  </div>
                </div>
                <h3 class="center"><span>Random Pick</span></h3>
                <div class="table">
                  <div class="th">
                    <h3>Random Pick</h3>
                    <p>/random<strong>values with comma</strong></p>
                  </div>
                  <div class="td">
                    <div class="tl">
                      <strong>Pick 1 random result from 1,2,3,4,5</strong>
                      <a href="https://sdfsdf.dev/random,1,2,3,4,5">https://sdfsdf.dev/random,1,2,3,4,5</a>
                    </div>
                  </div>
                </div>
              </section>
            </article>
          </div>
        </div>
        <footer class="footer">
          <span class="left">&copy; 2021 Copyright&nbsp;|&nbsp;Made with ❤️ by
            <a href="https://space.bilibili.com/12270873" target="_blank">GabrielxD</a></span>
          <span class="right">Powered by
            <a href="http://vanilla-js.com/" target="_blank">Vanilla.js</a>&nbsp;|&nbsp;Refer to
            <a href="https://www.ihewro.com/archives/489/" target="_blank">handsome</a></span>
        </footer>
      </div>
    </main>
  </div>
</body>

</html>